<template>
  <div id="app">
    <!-- 导航条，标题 -->
    <van-nav-bar
      class="navbar"
      title="FAST OS DOCKER"
      right-text=""
      left-arrow
      fixed
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
    <template #left>
      <van-icon class="fontSize" v-show="backIsShow" name="arrow-left" />
      <van-icon class="fontSize" v-show="!backIsShow && editIsShow" name="exchange" />
    </template>
    <template #right>
      <van-icon class="fontSize" v-show="myInfoIsShow" name="contact" />
    </template>
    </van-nav-bar>
    <!-- 路由容器 -->
    <div class="Appbox">
      <router-view />
    </div>
    <!-- Tabbar -->
    <van-tabbar class="tabbar" v-model="active" @change="onChange" active-color="#2792e6">
      <van-tabbar-item :name="item.link" v-for="item in nav" :key="item.link" :icon="item.icon">{{ item.title}}</van-tabbar-item>
      <div class="tabbox" v-show="tabIsShow"></div>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tabbar, TabbarItem, NavBar, Icon, Overlay, Dialog } from 'vant'
import navList from '@/router/tabbar.js'

Vue.use(Icon)
Vue.use(NavBar)
Vue.use(Tabbar)
Vue.use(TabbarItem)
Vue.use(Overlay)
Vue.use(Dialog)
export default {
  data () {
    return {
      active: '/Home', // tabbar选中
      nav: navList, // tabbar渲染数据
      backIsShow: true, // 控制返回按钮是否显示
      myInfoIsShow: true, // 控制个人信息按钮是否显示
      tabIsShow: false, // 控制底部tabbar是否禁用
      editIsShow: true // 控制退出按钮在登录页面是否显示
    }
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    $route: function () {
      this.fetchRouter()
    }
  },
  mounted () {
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
    window.addEventListener('unload', e => this.unloadHandler(e))
    // console.log(location.search)
    // 获取当前选中的菜单
    this.fetchRouter()
  },
  methods: {
    // 退出
    edit () {
      Dialog.confirm({
        title: '退出登录',
        message: '确认退出登录？'
      })
        .then(() => {
          localStorage.removeItem('baseURL')
          localStorage.removeItem('user')
          localStorage.removeItem('token')
          localStorage.removeItem('userList')
          location.reload()
        })
        .catch(() => {})
    },
    // tabbar跳转路由
    onChange (index) {
      this.$router.history.push(index)
    },
    // 返回按钮
    onClickLeft () {
      if (this.backIsShow) {
        this.$router.go(-1)
      } else {
        this.edit()
      }
    },
    // 个人中心
    onClickRight () {
      this.$router.history.push('/MyInfo')
    },
    // 获取当前路由判断当前的菜单
    fetchRouter () {
      var arr = this.$router.history.current.path.split('/')
      this.active = '/' + arr[1]
      const routerName = this.$router.history.current.name
      // 判断返回按钮是否显示
      if (routerName === 'Home' || routerName === 'Container' || routerName === 'Image' || routerName === 'Colony' || routerName === 'Login' || routerName === null) {
        this.backIsShow = false
      } else {
        this.backIsShow = true
      }
      // 判断myinfo按钮是否显示
      if (routerName === 'MyInfo' || routerName === 'Login') {
        this.myInfoIsShow = false
      } else {
        this.myInfoIsShow = true
      }
      // 判断tabbar是否禁用和退出按钮是否隐藏
      if (routerName === 'Login') {
        if (localStorage.getItem('user')) {
          this.tabIsShow = false
        } else {
          this.tabIsShow = true
        }
        this.editIsShow = false
      } else {
        this.tabIsShow = false
        this.editIsShow = true
      }
    },
    beforeunloadHandler () {
      this._beforeUnload_time = new Date().getTime()
    },
    unloadHandler (e) {
      this._gap_time = new Date().getTime() - this._beforeUnload_time
      // debugger
      // 判断是窗口关闭还是刷新
      if (this._gap_time <= 5) {
        localStorage.removeItem('baseURL')
        localStorage.removeItem('user')
        localStorage.removeItem('token')
        localStorage.removeItem('userList')
      }
    }
  },
  destroyed () {
    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
    window.removeEventListener('unload', e => this.unloadHandler(e))
  }
}
</script>

<style lang="scss">
.van-nav-bar__title{
  color: $color;
}
.van-pagination__item{
  height: 26px !important;
  border: 1px solid $color !important;
  border-radius: vw(15);
  margin: 0 vw(8);
}
[class*=van-hairline]::after{
  border: none !important;
}
#app{
  font-size: vw(32);
  padding-top: vw(103);
  padding-bottom: vw(138);
}
.tabbar{
  height: vw(138);
  border-top: solid 1px #DDDDDD !important;
}
.navbar{
  height: vw(103);
  border-bottom: solid 1px #DDDDDD !important;
}
.fontSize{
  font-size: vw(36);
}
.tabbox{
  background: #fff;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.Appbox{
  padding: vw(20);
  padding-top: 0;
  margin-top: vw(20);
}
.overlaybox{
  width: vw(300);
  height: vw(200);
  background: #fff;
  border-radius: vw(5);
  position: absolute;
  margin: auto;
  top: 40%;
  left: 0;
  right: 0;
  ul{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }
}
</style>
